<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" zIndex="10090">
        <view class="popup-common relative">
            <view class="title">订单查询 </view>
            <view
                class="absolute  top-[36rpx] right-[36rpx] text-[28rpx] text-[var(--text-color-light6)] leading-[30rpx] z-10"
                @click="clearDate">清除</view>
            <scroll-view scroll-y="true" class="h-[70vh] ">

                <view class="">
                    <view class="flex items-center justify-between  !p-[20rpx]">
                        <view class="flex-1 search-input mb-[20rpx] !text-[30rpx] h-[80rpx]">
                            <text class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn"></text>
                            <input class="input" maxlength="50" type="text" v-model="query.keyword"
                                placeholder="请输入搜索关键词" placeholderClass="text-[var(--text-color-light9)] !text-[30rpx]"
                                confirm-type="search">
                            <text v-if="query.keyword" class="nc-iconfont nc-icon-cuohaoV6xx1 clear"
                                @click="query.keyword = ''"></text>
                        </view>

                    </view>
                    <template v-if="props.timeTypeList && props.timeTypeList.length > 0">
                        <view class="mb-[20rpx] text-[32rpx] !pl-[20rpx]" v-if="props.timeTypeList[0]">
                            {{ props.timeTypeList[0]?.name }}
                        </view>
                        <view class="flex items-center justify-between  mb-[30rpx] !pl-[20rpx] !pr-[20rpx]"
                            v-if="props.timeTypeList[0]" @click="handleSelect()">
                            <view
                                class="w-[316rpx] h-[66rpx] box-border leading-[62rpx] rounded-[33rpx] bg-[var(--temp-bg)] text-center text-[26rpx] text-[var(--text-color-light6)] border-[2rpx] border-solid border-[var(--temp-bg)]"
                                :class="{ 'text-primary !border-[var(--primary-color)] !bg-[var(--primary-color-light)]': begin_time_str }">
                                {{ begin_time_str }}</view>
                            <view class="nc-iconfont nc-icon-jianV6xx"></view>
                            <view
                                class="w-[316rpx] h-[66rpx] box-border leading-[62rpx] rounded-[33rpx] bg-[var(--temp-bg)] text-center text-[26rpx] text-[var(--text-color-light6)] border-[2rpx] border-solid border-[var(--temp-bg)]"
                                :class="{ 'text-primary !border-[var(--primary-color)] !bg-[var(--primary-color-light)]': end_time_str }">
                                {{ end_time_str }}</view>
                        </view>
                        <view class="mb-[20rpx] text-[32rpx] !pl-[20rpx]" v-if="props.timeTypeList[1]">
                            {{ props.timeTypeList[1]?.name }}

                        </view>
                        <view class="flex items-center justify-between  mb-[30rpx] !pl-[20rpx] !pr-[20rpx]"
                            v-if="props.timeTypeList[1]" @click="handleTradeSelect()">
                            <view
                                class="w-[316rpx] h-[66rpx] box-border leading-[62rpx] rounded-[33rpx] bg-[var(--temp-bg)] text-center text-[26rpx] text-[var(--text-color-light6)] border-[2rpx] border-solid border-[var(--temp-bg)]"
                                :class="{ 'text-primary !border-[var(--primary-color)] !bg-[var(--primary-color-light)]': begin_trade_time_str }">
                                {{ begin_trade_time_str }}</view>
                            <view class="nc-iconfont nc-icon-jianV6xx"></view>
                            <view
                                class="w-[316rpx] h-[66rpx] box-border leading-[62rpx] rounded-[33rpx] bg-[var(--temp-bg)] text-center text-[26rpx] text-[var(--text-color-light6)] border-[2rpx] border-solid border-[var(--temp-bg)]"
                                :class="{ 'text-primary !border-[var(--primary-color)] !bg-[var(--primary-color-light)]': end_trade_time_str }">
                                {{ end_trade_time_str }}</view>
                        </view>
                    </template>

                    <!-- 订单状态 -->
                    <template v-if="props.statusTabs.length">
                        <view class="mb-[20rpx] text-[32rpx] !pl-[20rpx]">
                            订单状态
                        </view>
                        <view class="flex items-center  mb-[30rpx] flex-wrap !pl-[20rpx]">
                            <view
                                class="w-[160rpx] h-[66rpx] box-border flex-center rounded-[33rpx] mr-[20rpx] mb-[20rpx] bg-[var(--temp-bg)] text-center text-[28rpx] text-[var(--text-color-light6)] border-[2rpx] border-solid border-[var(--temp-bg)]"
                                v-for="(item, index) in props.statusTabs" :key="'a' + index"
                                :class="{ 'text-primary !border-[var(--primary-color)] !bg-[rgba(239,0,12,0.04)]': query.status == item?.status }"
                                @click="setStatusFn(item)">
                                {{ item?.name }}</view>

                        </view>
                    </template>
                    <!-- 订单来源 -->
                    <template v-if="props.sourceList.length">
                        <view class="mb-[20rpx] text-[32rpx] !pl-[20rpx]">
                            订单来源
                        </view>
                        <view class="flex items-center  mb-[30rpx] flex-wrap !pl-[20rpx]">
                            <view
                                class="w-[160rpx] h-[66rpx] box-border flex-center rounded-[33rpx] mr-[20rpx] mb-[20rpx] bg-[var(--temp-bg)] text-center text-[28rpx] text-[var(--text-color-light6)] border-[2rpx] border-solid border-[var(--temp-bg)]"
                                v-for="(item, index) in props.sourceList" :key="'a' + index"
                                :class="{ 'text-primary !border-[var(--primary-color)] !bg-[rgba(239,0,12,0.04)]': query.source == item?.status }"
                                @click="setSourceFn(item)">
                                {{ item?.name }}</view>

                        </view>
                    </template>
                    <!-- 订单类型 -->
                    <template v-if="props.orderTypeList.length">
                        <view class="mb-[20rpx] text-[32rpx] !pl-[20rpx]">
                            订单类型
                        </view>
                        <view class="flex items-center  mb-[30rpx] flex-wrap !pl-[20rpx]">
                            <view
                                class="w-[160rpx] h-[66rpx] box-border flex-center rounded-[33rpx] mr-[20rpx] mb-[20rpx] bg-[var(--temp-bg)] text-center text-[28rpx] text-[var(--text-color-light6)] border-[2rpx] border-solid border-[var(--temp-bg)]"
                                v-for="(item, index) in props.orderTypeList" :key="'a' + index"
                                :class="{ 'text-primary !border-[var(--primary-color)] !bg-[rgba(239,0,12,0.04)]': query.type == item?.status }"
                                @click="setTypeFn(item)">
                                {{ item?.name }}</view>

                        </view>
                    </template>

                </view>

            </scroll-view>
            <view class="btn-wrap flex justify-between items-center !pt-[30rpx] ">
                <button
                    class="btn flex-1  mr-[20rpx] !text-[var(--primary-color)]  border-[2rpx] border-solid border-[var(--primary-color)] rounded-[100rpx] bg-transparent box-border"
                    hover-class="none" @click="reset">重置</button>
                <button class=" btn primary-btn-bg !text-[#fff] flex-1 font-500" shape="circle" hover-class="none"
                    @click="save">确定</button>
            </view>
        </view>
    </u-popup>
    <!-- 时间选择 -->
    <select-date ref="selectDateRef" :default-date="query.create_time" @confirm="confirmFn" />
    <!-- 时间选择 -->
    <select-date ref="selectTradeDateRef" :default-date="query.trade_time" @confirm="confirmTradeFn" />
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'

const emits = defineEmits(['confirm'])
// 弹框时间选择
const show = ref(false)
const props = defineProps({
    statusTabs: { // 订单状态
        type: Array,
        default: () => {
            return []
        }
    },
    sourceList: { // 订单来源
        type: Array,
        default: () => {
            return []
        }
    },
    orderTypeList: { // 订单类型
        type: Array,
        default: () => {
            return []
        }
    }, defaultDate: {
        type: Array,
        default: () => {
            return []
        }
    }, tradeDate: {
        type: Array,
        default: () => {
            return []
        }
    },
    timeTypeList: { // 订单类型
        type: Array,
        default: () => {
            return []
        }
    }

})
watch(() => show.value, () => {
    if (show.value) {
        query.value.create_time = props.defaultDate
        query.value.trade_time = props.tradeDate
    }
    console.log(query.value)
})

const begin_time_str = computed(() => {
    let beginTime = query.value.create_time[0] ? query.value.create_time[0].split(' ')[0] : '';
    return beginTime

})
const end_time_str = computed(() => {

    let endTime = query.value.create_time[1] ? query.value.create_time[1].split(' ')[0] : '';
    return endTime

})
const begin_trade_time_str = computed(() => {
    let beginTime = query.value.trade_time[0] ? query.value.trade_time[0].split(' ')[0] : '';
    return beginTime

})
const end_trade_time_str = computed(() => {

    let endTime = query.value.trade_time[1] ? query.value.trade_time[1].split(' ')[0] : '';
    return endTime

})

const INIT_QUERY_PARAMS = {
    keyword: '', // 关键词
    status: undefined, // 订单状态
    source: undefined,//订单来源
    type: undefined,//订单类型
    create_time: props.defaultDate as any, // 交易时间
    trade_time: props.tradeDate as any, // 交易时间



}
const query = ref({
    ...INIT_QUERY_PARAMS
})

/**设置订单状态 */
const setStatusFn = (data: any) => {
    query.value.status = data?.status
}
/** 设置订单来源 */
const setSourceFn = (data: any) => {
    query.value.source = data?.status
}
/** 设置订单类型 */
const setTypeFn = (data: any) => {
    query.value.type = data?.status
}



const save = () => {

    emits('confirm', query.value)
    show.value = false
}
const reset = () => {
    query.value = { ...INIT_QUERY_PARAMS }

}

const clearDate = () => {
    query.value = { ...INIT_QUERY_PARAMS }
    emits('confirm', query.value)
    show.value = false
}

const selectDateRef = ref()
const handleSelect = () => {
    selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
    query.value.create_time = data;
}
const selectTradeDateRef = ref()
const handleTradeSelect = () => {
    selectTradeDateRef.value.show = true
}
// 确定时间筛选
const confirmTradeFn = (data: any) => {
    query.value.trade_time = data;
}
defineExpose({
    show
})
</script>

<style scoped>
:deep(.uni-picker-view-content) {
    z-index: 10;
}

:deep(.uni-picker-view-indicator::before) {
    border: none !important;
}

:deep(.uni-picker-view-indicator::after) {
    border: none !important;
}
</style>
<style lang="scss">
.gradation-picker {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 70rpx;
        background: linear-gradient(#fff, rgba(255, 255, 255, .5));
        z-index: 10;
    }

    &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 70rpx;
        background: linear-gradient(#fff, rgba(255, 255, 255, .5));
        z-index: 12;
    }
}
</style>